import React from "react"
import './TodoItem.css'
function TodoItem(props){
    
    function classNames(active){
        if(active){
            return "todo-item-text complated"
        }else{
            return"todo-item-text"
        }

    }

    return(
        <li className="todo-item">
            <input type="checkbox" 
                checked={props.todo.complated} onChange={()=>{props.todoToggle(props.todo.id)}}/>
            <label className={classNames(props.todo.complated)}>{props.todo.text}</label>
            <span className="btn-del" onClick={()=>{props.removeTodo(props.todo.id)}}>X</span>
        </li>
    )
}
export default TodoItem